<template>
	<div class="w-full h-[100vh] bg-[#f5f5f5]">
		<div class="iconfont icon-elment icon">饿了么</div>
		<div @click="Nav.navToPage('Login')" class="flex flex-row items-center mt-[20px]">
			<img class="ml-[25px] w-[64px] h-[64px] rounded-full" :src="avatar" alt="" />
			<div class="ml-[25px] text-[40px] font-bold tracking-[3px]">166****1163</div>
			<div class="w-[230px] text-[40px] font-bold"></div>
			<div class="text-[#00ACF0] text-[22px] px-[20px] border-solid border-2 border-[#00ACF0] rounded-[50px]">账号管理</div>
		</div>
		<div class="w-[700px] h-[190px] ml-[25px] bg-white flex 
		flex-row justify-around items-center mt-[20px] rounded-[20px] text-center">
			<div class="w-[200px]">
				<div class="iconfont icon-qianbao iconMini"></div>
				<div class="text-[#191919] text-[24px]">我的资产</div>
			</div>
			<div class="h-[150px] w-[0.5px] bg-[#0000001f]"></div>
			<div class="w-[200px]">
				<div class="iconfont icon-hongbao iconRed"></div>
				<div class="text-[#191919] text-[24px]">红包</div>
			</div>
			<div class="w-[200px]">
				<div class="iconfont icon-kaquanbao iconRed"></div>
				<div class="text-[#191919] text-[24px]">券包</div>
			</div>
		</div>
		<div class="w-[700px] h-[280px] ml-[25px] bg-white 
		flex flex-row flex-wrap justify-start items-center mt-[20px] rounded-[20px] text-center">
			<div v-for="item in iconList" class="w-[175px] h-[140px] flex flex-col justify-center items-center">
				<div :class="['iconfont','iconMini', item.iconName ]"></div>
				<div class="text-[#191919] text-[24px]">{{ item.title }}</div>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
	import avatar from '@/assets/images/avatar.webp';
	import { Nav } from '@/main';
	const iconList = [
		{
			title:'我的地址',
			iconName:'icon-ditu_dingwei_o'
		},
		{
			title:'我的客服',
			iconName:'icon-kefu'
		},
		{

			title:'关于饿了么',
			iconName:'icon-17'
		},
		{
			title:'用户隐私',
			iconName:'icon-a-yinsibaohuyanzhengma'
		},
		{
			title:'规则中心',
			iconName:'icon-guanyu'
		},
	]
</script>
<style scoped>
	.icon {
		font-weight: bold;
		padding: 20px;
		font-size: 36px;
		color: #0fb6f9;
	}
	.iconMini {
		font-size: 44px;
		color: #000000;
	}
	.iconRed {
		font-size: 44px;
		color: #fe5b3c;
	}
</style>
